<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
      <?php

        require_once 'Private/Peticiones/pcEntradaCatalogo.php';        
        $lstEntradas= ejecutar($catalogo);
    ?>
    <head>
        <title></title>

        <script type="text/javascript" src="/Sofarum/resources/jquery-1.6.4.js"></script>
        <script type="text/javascript" src="/Sofarum/resources/jquery.cycle.all.js"></script>

        <script type="text/javascript">
            var imagenActual=0,capaActiva=0;
            //Al cargar la pagina
            $(document).ready(function() {
                //Efecto para pasar fotos
                $('#imagen').cycle({
                    fx: 'shuffle',
                    speed:  300,
                    next: '#sig',
                    prev: '#antes',
                    before: ocultarEnlaces,
                    after:activarEnlaces,
                    timeout: 0
                });
                $('.previa').click(function() {
                    actualizarValores(null,this.id);    /*Al hacer click en el elemento con id "preview"*/
                    mostrarVentana();              /*se ejecuta la funcion mostrarVentana() */
                });
               
                $('#cerrarPopup').click(function() { /*Al hacer click en el elemento con id "preview"*/
                    cerrarVentana();              /*se ejecuta la funcion mostrarVentana() */
                });  
            });


            function mostrarVentana() {
                $('#mascara').fadeTo(1000, 0.6, function() { /*Al acabar el fadeTo empezarán los 2 fadeIn */
                    $('#popup').fadeIn(1000);

                });
            }

            function cerrarVentana() {

                $('#popup').fadeOut(1000,function(){
                    $('#mascara').fadeOut(1000);
                });

            }
            function actualizarValores(incremento,valor)
            {

                var numFotos =parseInt(<?php echo $lstEntradas->size() ?>, 10);
                if(valor==null)
                {
                    imagenActual = (imagenActual+numFotos+incremento)%numFotos;
                    capaActiva=(capaActiva+1)%2;
                }else{
                    imagenActual = parseInt(valor,10);
                }
                
                document.getElementById("capaGrande"+capaActiva).src=
                        document.getElementById(imagenActual+"").src;
                document.getElementById("capaGrande"+capaActiva).alt=
                    document.getElementById(imagenActual+"").alt;
                document.getElementById("capaGrande"+capaActiva).title=
                    document.getElementById(imagenActual+"").title;
            }

            function activarEnlaces(){
                document.getElementById("antes").style.visibility="visible";
                document.getElementById("sig").style.visibility="visible";                
            }

            function ocultarEnlaces(){
                document.getElementById("antes").style.visibility="hidden";
                document.getElementById("sig").style.visibility="hidden";                
            }

        </script>

    </head>
  
    <body>
        <?php include 'Include/cabecera.php'; ?>
        <?php include 'Include/menu.php'; ?>
        <div id="fotos">
            <?php
                for($i=0;$i<$lstEntradas->size();$i++)
                {
                    echo "<div><img id='".$i."' class='previa' src='".$lstEntradas->get($i)->getCodImagen().
                            "' width='100' height='100' alt='".$lstEntradas->get($i)->getTitulo()."' title='".$lstEntradas->get($i)->getTitulo()."' /></div>";
                }
            ?>
         
        </div>
       

        <div id="popup" style="position:absolute; top: 10%; left:10%; z-index:4;display:none;">
            <div id="imagen" >

                <img id="capaGrande0" style="display: none; width:300px; height: 300px "/>
                <img id="capaGrande1" style="display: none; width:300px; height: 300px "/>
            
            </div>
            <script>
                document.getElementById("capaGrande0").src=
                        document.getElementById(imagenActual+"").src;                   
            </script>
            
            <a onclick="actualizarValores(-1,null);" id="antes" href="#">Antes</a>
            <a onclick="actualizarValores(1,null); " id="sig" href="#">Siguiente</a>
            <div id="cerrarPopup" style="float:right;">X</div>

        </div>
         <div id="mascara" style="position:absolute; background-color: #000000; z-index:3; width: 120%; height: 120%; top:0; left:0; display:none;"></div>
    </body>
</html>
